<template>
    <div class="footer_box">
        <div class="footer_left_menu">
            <div v-if="showIcon" class="icon" :class="nowIndex === 0 ? 'disabled' : ''" @click="leftHandle">
                <left-outlined />
            </div>
            <div
                class="footer_left_menu_content"
                :style="{
                    '--secondMenuWidth': secondMenuWidth
                }"
            >
                <div :style="getSecondMenuContentStyle">
                    <div
                        v-for="(item, index) in secondaryMenu"
                        :key="index"
                        class="footer_left_menu_box"
                        :style="getDpaBottomStyle(index)"
                        :class="isActive === item.code ? 'left_menu_highlighted' : 'left_menu_no_highlighted'"
                        @click="menuHandleLeft(item)"
                    >
                        {{ item.name }}
                    </div>
                </div>
            </div>
            <div v-if="showIcon" class="icon" :class="nowIndex >= rightLength ? 'disabled' : ''" @click="rightHandle">
                <right-outlined />
            </div>
        </div>
        <div v-if="!isEmpty(menuInfo)" class="footer_center" @click="menuHandle(menuInfo)">
            {{ menuInfo.name }}
        </div>
        <div class="footer_logo">
            <span v-if="config.footerSettings.type === 'text'">{{ config.footerSettings.text }}</span>
            <img v-else :src="config.footerSettings.img" alt="" />
        </div>
    </div>
</template>

<script lang="ts">
    import { defineComponent, computed, watch, ref, PropType } from 'vue'
    import logo from '@/assets/images/logo.png'
    import { setStorage } from '@/utils/common'
    import { isEmpty, isEmptyArr } from '@/utils/is'
    import { CURRENT_URL } from '@/enums/cacheEnum'
    import { useRouter } from 'vue-router'
    const MENU_WIDTH = 110 // 菜单宽度
    const TRANSLATE_X_VALUE = -110 // 菜单一次移动的距离
    const SHOW_MENU_LENGTH = 3 // 显示的菜单长度

    export default defineComponent({
        name: 'FooterDpa',
        props: {
            config: {
                type: Object,
                default: () => ({})
            },
            menuInfo: {
                type: Object,
                default: () => ({})
            },
            secondaryMenu: {
                type: Array as PropType<appMenu[]>,
                default: () => []
            },
            // 默认菜单code
            defaultCode: {
                type: String,
                default: ''
            }
        },
        setup(props) {
            // ---------------------------------------------------- 属性
            const isActive = ref('') // 二级菜单高亮
            const dpaBottomConfig = ref(props.config)
            const nowIndex = ref(0) // 当前移动的下标
            const router = useRouter()
            // ---------------------------------------------------- 监听
            // 菜单长度
            const menuLength = computed(() => {
                return props.secondaryMenu.length
            })
            // 右边可移动的长度
            const rightLength = computed(() => {
                return menuLength.value - SHOW_MENU_LENGTH
            })
            // 结构marginRight--全局使用
            const marginRightValue = computed(() => {
                const {
                    marginSetting: {
                        leftNavigation: { secondaryMenu }
                    }
                } = dpaBottomConfig.value
                return secondaryMenu
            })
            const getDpaBottomStyle = computed(() => {
                return index => (menuLength.value - 1 === index ? '' : `margin-right: ${marginRightValue.value}px`) // 最后一个菜单没有margin
            })
            // 动态计算二级菜单宽度
            const secondMenuWidth = computed(() => {
                return `${MENU_WIDTH * SHOW_MENU_LENGTH + marginRightValue.value * 2}px`
            })
            // 菜单内容样式
            const getSecondMenuContentStyle = computed(() => {
                return {
                    width: `${menuLength.value * MENU_WIDTH + marginRightValue.value * (menuLength.value - 1)}px`,
                    transform: `translateX(${nowIndex.value * (TRANSLATE_X_VALUE - marginRightValue.value)}px)`
                }
            })
            // 超过3个，展示左右icon
            const showIcon = computed(() => {
                return menuLength.value > SHOW_MENU_LENGTH
            })
            watch(
                () => props.config,
                value => {
                    dpaBottomConfig.value = value
                },
                {
                    deep: true
                }
            )
            watch(
                () => props.defaultCode,
                value => {
                    // 根据code查找菜单信息 去跳转
                    !isEmptyArr(props.secondaryMenu) &&
                        menuHandleLeft(props.secondaryMenu.find(item => item.code === value))
                    nowIndex.value = 0 // 切换菜单，恢复默认值
                },
                {
                    deep: true
                }
            )
            // ---------------------------------------------------- 方法
            // 点击当前菜单
            function menuHandle({ menuUrl: path, code, children, contentSetting }) {
                if (children && children.length) {
                    const [item] = children
                    path = item.menuUrl
                }
                if (path.startsWith('app_')) {
                    path = '/' + path
                }
                // 连接中带有参数，解析出来
                const routerQuery = {}
                if (contentSetting && contentSetting.settingType === 'CUSTOM_PAGE') {
                    routerQuery['iframe_url'] = contentSetting.settingId
                }
                const routeUrl = router.resolve({
                    path,
                    query: Object.assign(routerQuery, { dpaDetail: 'dpaDetail', code })
                })
                window.open(routeUrl.href, '_blank')
            }
            function menuHandleLeft(menuInfo) {
                isActive.value = menuInfo.code
                setStorage(CURRENT_URL, menuInfo.menuUrl)
                if (menuInfo.menuUrl.startsWith('app_')) {
                    router.push('/' + menuInfo.menuUrl)
                } else {
                    router.push(menuInfo.menuUrl)
                }
            }
            // 左边icon事件
            function leftHandle() {
                if (nowIndex.value <= 0) {
                    return
                }
                nowIndex.value--
            }
            // 右边icon事件
            function rightHandle() {
                if (nowIndex.value >= rightLength.value) {
                    return
                }
                nowIndex.value++
            }
            return {
                logo,
                isActive,
                nowIndex,
                menuLength,
                rightHandle,
                leftHandle,
                menuHandleLeft,
                menuHandle,
                showIcon,
                getSecondMenuContentStyle,
                secondMenuWidth,
                getDpaBottomStyle,
                rightLength,
                isEmpty
            }
        }
    })
</script>

<style lang="less" scoped>
    .footer_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 32px;

        .footer_left_menu {
            display: flex;
            align-items: center;
            width: 490px;
            overflow: hidden;

            .icon {
                width: 20px;
                font-size: 20px;
                color: #ffe296;
                cursor: pointer;

                &.disabled {
                    color: #aaa;
                    cursor: initial;
                }
            }

            .footer_left_menu_content {
                width: var(--secondMenuWidth);
                overflow: hidden;
                margin: 0 4px;

                & > div {
                    display: flex;

                    .footer_left_menu_box {
                        color: #ffffff;
                        letter-spacing: 0;
                        text-align: center;
                        background-size: 100% auto;
                        width: 110px;
                        height: 38px;
                        line-height: 38px;
                        padding: 0 10px;
                        cursor: pointer;
                        overflow: hidden;
                        background-repeat: no-repeat;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                    }

                    .left_menu_highlighted {
                        background-image: url('@/assets/images/second.png');
                        font-weight: 600;
                    }

                    .left_menu_no_highlighted {
                        background-image: url('@/assets/images/noHighlight.png');
                    }
                }
            }
        }

        .footer_center {
            width: 254px;
            height: 32px;
            cursor: pointer;
            line-height: 32px;
            background-size: 100% auto;
            background-image: url('@/assets/images/footer.png');
            font-family: PingFangSC-Semibold;
            font-size: 14px;
            color: #ffe296;
            letter-spacing: 0;
            text-align: center;
            left: calc(50% - 126px);
            position: absolute;
        }

        .footer_logo {
            display: flex;
            align-items: center;

            span {
                opacity: 0.3;
                font-family: PingFangSC-Semibold;
                font-size: 14.4px;
                color: #ffffff;
                letter-spacing: 0;
                margin-right: 6px;
            }

            img {
                width: auto;
                height: 16px;
            }
        }
    }
</style>
